import 'package:favorcate/core/model/meal_model.dart';
import 'package:favorcate/core/viewmodel/favor_view_mode.dart';
import 'package:favorcate/ui/pages/detail/detail.dart';
import 'package:flutter/material.dart';

import 'package:favorcate/ui/shared/extension/int_extension.dart';
import 'package:provider/provider.dart';

import 'operation_item.dart';

class ZSMealItem extends StatelessWidget {
  final ZSMealModel _meal;

  ZSMealItem(this._meal);

  final cardRadius = Radius.circular(10.px);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Card(
        margin: EdgeInsets.all(10.px),
        elevation: 5,
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.px)),
        child: Column(
          children: [buildBasicInfo(context), buildOperationInfo()],
        ),
      ),
      onTap: () {
        Navigator.of(context)
            .pushNamed(ZSDetailScreen.routeName, arguments: _meal);
      },
    );
  }

  Widget buildBasicInfo(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius:
              BorderRadius.only(topLeft: cardRadius, topRight: cardRadius),
          child: Image.network(
            _meal.imageUrl!,
            width: double.infinity,
            height: 250.px,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          right: 10.px,
          bottom: 10.px,
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.px, vertical: 5.px),
              width: 300.px,
              decoration: BoxDecoration(
                color: Colors.black54,
                borderRadius: BorderRadius.circular(6.px),
              ),
              child: Text(_meal.title!,
                  style: Theme.of(context)
                      .textTheme
                      .headline2
                      ?.copyWith(color: Colors.white))),
        )
      ],
    );
  }

  Widget buildOperationInfo() {
    return Padding(
      padding: EdgeInsets.all(5.px),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ZSOperationItem(Icon(Icons.schedule), '${_meal.duration}分钟'),
          ZSOperationItem(Icon(Icons.restaurant), '${_meal.complexStr}'),
          buildFavorItem()
        ],
      ),
    );
  }

  Widget buildFavorItem() {
    return Consumer<ZSFavorViewModel>(builder: (ctx, favorVM, child) {
      //1.判断是否是收藏状态
      final iconData =
          favorVM.isFavor(_meal) ? Icons.favorite : Icons.favorite_border;
      final favorColor = favorVM.isFavor(_meal) ? Colors.red : Colors.black;
      final title = favorVM.isFavor(_meal) ? '已收藏' : '未收藏';
      return GestureDetector(
        child: ZSOperationItem(
          Icon(iconData, color: favorColor),
          title,
          textColor: favorColor,
        ),
        onTap: () {
          favorVM.handleMeal(_meal);
        },
      );
    });
  }
}
